<template>
	<view>
		<input type="text" placeholder="输入小区名称或地址" style="border: 1rpx solid blue" :value="searchKey" @input="search" />
		<view class="flex padding-top-sm bg-white solid-bottom"  v-for="(info,index) in list" :key="index" @tap="toPullish(info)">
			<view class="flex-treble padding-top-sm padding-bottom-sm padding-left-sm">
				<view class="titleys">{{info.title}}</view>
				<view class="mapys padding-top-sm">
					<text class='cuIcon-locationfill'></text>
					<text class="text-black">{{info.address}}</text>
				</view>
			</view>
			<view class="flex-sub padding-bottom-sm text-center margin-top-xs">
				<view class="numys margin-top-xs">{{info._distance}}m</view>
			</view>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('../../common/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				TabCur: 0,
				list:[],
				latitude: 39.909, // 默认定在首都
				longitude: 116.39742,
				scale: 12, // 默认16
				markers: [],
				markerHeight:40,
				address:'',
				searchKey: ''
			};
		},
		onLoad(){
			 // 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: 'WS3BZ-QUFEO-TNEW5-S2RZ6-QVQI6-PJFWY'
			});
			// let mapSearch = weex.requireModule('mapSearch')  
			uni.getLocation({
				success: res => {
					console.log('location success', res) 
					this.latitude = res.latitude
					this.longitude = res.longitude
				}
			})
		},
		methods: {
			search(e){
				console.log(e)
				let that = this
				that.searchKey = e.detail.value
				var location = that.latitude+","+ that.longitude
				that.mapSearch(that.searchKey,location).then(res => {
					console.log("res11111111111",res)
					that.list = res.data
					},error => {
				})
			},
			mapSearch(keyword,location){
				console.log(keyword,location,"keyword,location")
				let promise = new Promise(function(resolve, reject) {
					// 调用接口
					qqmapsdk.search({
						keyword: keyword,//搜索关键词
						location:location ,  //设置周边搜索中心点
						success: function (res) {
							resolve(res)
						},
						fail: function (res) {
							reject(res)
						}
					});
				})
				return promise
			},
			back(){
				uni.navigateBack();
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			getlist(){
				let that=this;
				let list = that.list
				list.forEach(item => {
					that.markers.push({	//往里面添加循环数据
							id: item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							iconPath: "../../../static/img/mark_blue.png",
							width: 40,
							height: 45,
							callout: {
								content: item.location,
								textAlign: 'center',
								borderRadius: 4,
								padding: 4,
								display: 'ALWAYS'
							}
					})
				});
				that.list=list;
			},
			toMapAPP(lat,lng){
				uni.openLocation({
					latitude: lat,
					longitude: lng,
					scale: 18
				})
			},
			toPullish(info){
				uni.navigateTo({
					
				})
			}
		}
	}
</script>
<style>
	page{background-color:#FFFFFF;}
	.titleys{color: #101010;font-size:30rpx;}
	.mapys{color: #5E6B9C;font-size:24rpx;}
	.numys{color: #3388FF;font-size:26rpx;}
</style>
